<template>
  <div v-loading="isLoading" class="comp-tree">
    <el-button type="primary" class="comp-tr-top" size="small" @click="handleAddTop" :style="{
      backgroundColor: theme,
      borderColor: theme,
      fontWeight: 'bold',
      width: '100%',
    }">添加顶级节点</el-button>
    <!-- tree -->
    <el-tree ref="SlotTree" :data="setTree" :props="defaultProps" :expand-on-click-node="false" highlight-current
      :node-key="NODE_KEY">
      <div class="comp-tr-node" slot-scope="{ node, data }">
        <!-- 编辑状态 -->
        <template v-if="node.isEdit">
          <el-input v-model="data.label" autofocus size="mini" :ref="'slotTreeInput' + data[NODE_KEY]"
            @blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)"></el-input>
        </template>

        <!-- 非编辑状态 -->
        <template v-else>
          <!-- 名称： 新增节点增加class（is-new） -->
          <span :class="[
            data[NODE_KEY] < NODE_ID_START ? 'is-new' : '',
            'comp-tr-node--name',
          ]">
            {{ node.label }}
          </span>

          <!-- 按钮 -->
          <span class="comp-tr-node--btns">
            <!-- 新增 -->
            <el-button icon="el-icon-plus" size="mini" circle type="primary" @click="handleAdd(node, data)"></el-button>

            <!-- 编辑 -->
            <el-button icon="el-icon-edit" size="mini" circle type="info" @click="handleEdit(node, data)"></el-button>

            <!-- 删除 -->
            <el-button icon="el-icon-delete" size="mini" circle type="danger" @click="handleDelete(node, data)">
            </el-button>
          </span>
        </template>
      </div>
    </el-tree>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import {
  categoryTree,
  updateCategory,
  addCategory,
  delCategory,
} from "@/api/vadmin/course/course";
export default {
  name: "isEdTree",
  data() {
    return {
      isLoading: false, // 是否加载
      setTree: [], // tree数据
      NODE_KEY: "id", // id对应字段
      MAX_LEVEL: 3, // 设定最大层级
      NODE_ID_START: 0, // 新增节点id，逐次递减
      startId: null,
      defaultProps: {
        // 默认设置
        children: "children",
        label: "label",
      },
      initParam: {
        // 新增参数
        label: "新增节点",
        parentId: null,
        children: [],
      },
    };
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },

  created() {
    this.getTreeselect();
    // 初始值
    this.startId = this.NODE_ID_START;
  },
  methods: {
    /** 查询下拉树结构 */
    getTreeselect() {
      categoryTree().then((response) => {
        this.setTree = response;
      });
    },
    handleDelete(_node, _data) {
      // 删除节点
      // console.log("删除节点", _node, _data);
      // 判断是否存在子节点
      if (_data.children && _data.children.length !== 0) {
        this.$message.error("此节点有子级，不可删除！");
        return false;
      } else {
        // 删除操作
        let DeletOprate = () => {
          this.$nextTick(() => {
            if (this.$refs.SlotTree) {
              this.$refs.SlotTree.remove(_data);
              this.$message.success("删除成功！");
            }
          });
        };

        // 二次确认
        let ConfirmFun = () => {
          this.$confirm("是否删除此节点？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              delCategory(_data.id).then((res) => {
                this.$refs.SlotTree.remove(_data);
                this.msgSuccess("删除成功");
              });
            })
            .catch(() => { });
        };

        // 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
        _data[this.NODE_KEY] < this.NODE_ID_START
          ? DeletOprate()
          : ConfirmFun();
      }
    },
    handleInput(_node, _data) {
      // 修改节点
      // console.log("修改节点", _node, _data);
      if (_data.parentId == 0) {
        _data.parentId = null;
      }
      updateCategory({
        id: _data.id,
        name: _data.label,
        parentId: _data.parentId,
      }).then((res) => {
        this.msgSuccess("修改成功");
      });
      // 退出编辑状态
      if (_node.isEdit) {
        this.$set(_node, "isEdit", false);
      }
    },
    handleEdit(_node, _data) {
      // 编辑节点
      // console.log(_node, _data);
      // 设置编辑状态
      if (!_node.isEdit) {
        this.$set(_node, "isEdit", true);
      }

      // 输入框聚焦
      this.$nextTick(() => {
        if (this.$refs["slotTreeInput" + _data[this.NODE_KEY]]) {
          this.$refs[
            "slotTreeInput" + _data[this.NODE_KEY]
          ].$refs.input.focus();
        }
      });
    },
    handleAdd(_node, _data) {
      // 新增节点
      // console.log("新增节点", _node, _data);
      // 判断层级
      if (_node.level >= this.MAX_LEVEL) {
        this.$message.warning("当前已达到" + this.MAX_LEVEL + "级，无法新增！");
        return false;
      }

      // 参数修改
      let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
      obj.parentId = _data[this.NODE_KEY]; // 父id
      obj[this.NODE_KEY] = --this.startId; // 节点id：逐次递减id
      // 判断字段是否存在
      if (!_data.children) {
        this.$set(_data, "children", []);
      }
      _data.children.push(obj);
      // console.log("新增的结果", obj);
      // 新增数据
      addCategory({ name: obj.label, parentId: obj.parentId }).then(() => {
        this.getTreeselect();
      });
      // 展开节点
      if (!_node.expanded) {
        _node.expanded = true;
      }
    },
    handleAddTop() {
      // 添加顶部节点
      let obj = JSON.parse(JSON.stringify(this.initParam)); // copy参数
      obj[this.NODE_KEY] = --this.startId; // 节点id：逐次递减id
      this.setTree.push(obj);
      addCategory({ name: obj.label, parentId: "" }).then(() => {
        this.getTreeselect();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* common */

// 显示按钮
.show-btns {
  opacity: 1;
}

/* common end */

.comp-tree {
  width: 100%;
  // max-width: 700px;

  // max-height: 80vh;
  overflow: scroll;
  // 顶部按钮
  font-size: 14px !important;

  .comp-tr-top {
    width: 100px;
    margin-bottom: 10px;
  }

  // 自定义节点
  .comp-tr-node {
    display: block;
    width: 100%;

    //overflow: scroll;
    // label
    .comp-tr-node--name {
      display: inline-block;
      line-height: 40px;
      min-height: 40px;

      // 新增
      &.is-new {
        font-weight: bold;
      }
    }

    // button
    .comp-tr-node--btns {
      margin-left: 10px;
      opacity: 0;
      transition: opacity 0.1s;

      .el-button {
        transform: scale(0.8); // 缩小按钮

        &+.el-button {
          margin-left: -1px;
        }
      }
    }
  }

  // 高亮显示按钮
  .is-current {
    &>.el-tree-node__content {
      .comp-tr-node--btns {
        @extend .show-btns;
      }
    }
  }

  // 悬浮显示按钮
  .el-tree-node__content {
    &:hover {
      .comp-tr-node--btns {
        @extend .show-btns;
      }
    }
  }
}
</style>